body{
	background-color: rgba(210,223,238,0.5);
}
/* 宽度 px值 */
.ron-width-1{
	width: 10px;
}
.ron-width-2{
	width: 20px;
}
.ron-width-3{
	width: 30px;
}
.ron-width-4{
	width: 40px;
}
.ron-width-5{
	width: 50px;
}
.ron-width-6{
	width: 60px;
}
.ron-width-7{
	width: 70px;
}
.ron-width-8{
	width: 80px;
}
.ron-width-9{
	width: 90px;
}
.ron-width-10{
	width: 100px;
}
.ron-width-11{
	width: 110px;
}
.ron-width-12{
	width: 120px;
}
.ron-width-13{
	width: 130px;
}
.ron-width-13{
	width: 140px;
}
.ron-width-15{
	width: 150px;
}
.ron-width-16{
	width: 160px;
}
.ron-width-17{
	width: 170px;
}
.ron-width-18{
	width: 180px;
}
.ron-width-19{
	width: 190px;
}
.ron-width-20{
	width: 200px;
}
.ron-width-21{
	width: 210px;
}
.ron-width-22{
	width: 220px;
}
.ron-width-23{
	width: 230px;
}
.ron-width-24{
	width: 240px;
}
.ron-width-25{
	width: 250px;
}
.ron-width-26{
	width: 260px;
}
.ron-width-27{
	width: 270px;
}
.ron-width-28{
	width: 280px;
}
.ron-width-29{
	width: 290px;
}
.ron-width-30{
	width: 300px;
}
.ron-width-35{
	width: 350px;
}
.ron-width-40{
	width: 400px;
}
.ron-width-45{
	width: 450px;
}
.ron-width-50{
	width: 500px;
}
.ron-width-55{
	width: 550px;
}
.ron-width-60{
	width: 600px;
}
.ron-width-65{
	width: 650px;
}
.ron-width-70{
	width: 700px;
}
.ron-width-75{
	width: 750px;
}
.ron-width-80{
	width: 800px;
}
.ron-width-85{
	width: 850px;
}
.ron-width-90{
	width: 900px;
}
.ron-width-95{
	width: 950px;
}
.ron-width-100{
	width: 1000px;
}
.ron-width-1050{
	width: 1050px;
}

/* 高度 px值 */
.ron-height-1{
	height: 10px;
}
.ron-height-2{
	height: 20px;
}
.ron-height-3{
	height: 30px;
}
.ron-height-4{
	height: 40px;
}
.ron-height-5{
	height: 50px;
}
.ron-height-6{
	height: 60px;
}
.ron-height-7{
	height: 70px;
}
.ron-height-8{
	height: 80px;
}
.ron-height-9{
	height: 90px;
}
.ron-height-10{
	height: 100px;
}
.ron-height-11{
	height: 110px;
}
.ron-height-12{
	height: 120px;
}
.ron-height-13{
	height: 130px;
}
.ron-height-14{
	height: 140px;
}
.ron-height-15{
	height: 150px;
}
.ron-height-16{
	height: 160px;
}
.ron-height-17{
	height: 170px;
}
.ron-height-18{
	height: 180px;
}
.ron-height-19{
	height: 190px;
}
.ron-height-20{
	height: 200px;
}
.ron-height-21{
	height: 210px;
}
.ron-height-22{
	height: 220px;
}
.ron-height-23{
	height: 230px;
}
.ron-height-24{
	height: 240px;
}
.ron-height-25{
	height: 250px;
}
.ron-height-26{
	height: 260px;
}
.ron-height-27{
	height: 270px;
}
.ron-height-28{
	height: 280px;
}
.ron-height-29{
	height: 290px;
}
.ron-height-30{
	height: 300px;
}
.ron-height-35{
	height: 350px;
}
.ron-height-40{
	height: 400px;
}
.ron-height-45{
	height: 450px;
}
.ron-height-50{
	height: 500px;
}
.ron-height-55{
	height: 550px;
}
.ron-height-60{
	height: 600px;
}
.ron-height-65{
	height: 650px;
}
.ron-height-70{
	height: 700px;
}
.ron-height-75{
	height: 750px;
}
.ron-height-80{
	height: 800px;
}
.ron-height-85{
	height: 850px;
}
.ron-height-90{
	height: 900px;
}
.ron-height-95{
	height: 950px;
}
.ron-height-100{
	height: 1000px;
}
.ron-height-105{
	height: 1050px;
}

/* 宽度百分比 */
.ron-width-b1{
	width: 10%;
}
.ron-width-b15{
	width: 15%;
}
.ron-width-b2{
	width: 20%;
}
.ron-width-b25{
	width: 25%;
}
.ron-width-b3{
	width: 30%;
}
.ron-width-b35{
	width: 35%;
}
.ron-width-b4{
	width: 40%;
}
.ron-width-b45{
	width: 45%;
}
.ron-width-b5{
	width: 50%;
}
.ron-width-b55{
	width: 55%;
}
.ron-width-b6{
	width: 60%;
}
.ron-width-b65{
	width: 65%;
}
.ron-width-b7{
	width: 70%;
}
.ron-width-b75{
	width: 75%;
}
.ron-width-b8{
	width: 80%;
}
.ron-width-b85{
	width: 85%;
}
.ron-width-b9{
	width: 90%;
}
.ron-width-b95{
	width: 95%;
}
.ron-width-b100{
	width: 100%;
}


/* 高度百分比 */

.ron-height-b1{
	height: 10%;
}
.ron-height-b15{
	height: 15%;
}
.ron-height-b2{
	height: 20%;
}
.ron-height-b25{
	height: 25%;
}
.ron-height-b3{
	height: 30%;
}
.ron-height-b35{
	height: 35%;
}
.ron-height-b4{
	height: 40%;
}
.ron-height-b45{
	height: 45%;
}
.ron-height-b5{
	height: 50%;
}
.ron-height-b55{
	height: 55%;
}
.ron-height-b6{
	height: 60%;
}
.ron-height-b65{
	height: 65%;
}
.ron-height-b7{
	height: 70%;
}
.ron-height-b75{
	height: 75%;
}
.ron-height-b8{
	height: 80%;
}
.ron-height-b85{
	height: 85%;
}
.ron-height-b9{
	height: 90%;
}
.ron-height-b95{
	height: 95%;
}
.ron-height-b100{
	height: 100%;
}

/* 背景 */

.ron-bg-red {
	background-color: #e54d42;
	color: #ffffff;
}

.ron-bg-orange {
	background-color: #f37b1d;
	color: #ffffff;
}

.ron-bg-yellow {
	background-color: #fbbd08;
	color: #333333;
}

.ron-bg-olive {
	background-color: #8dc63f;
	color: #ffffff;
}

.ron-bg-green {
	background-color: #39b54a;
	color: #ffffff;
}

.ron-bg-cyan {
	background-color: #1cbbb4;
	color: #ffffff;
}

.ron-bg-blue {
	background-color: #0081ff;
	color: #ffffff;
}

.ron-bg-purple {
	background-color: #6739b6;
	color: #ffffff;
}

.ron-bg-mauve {
	background-color: #9c26b0;
	color: #ffffff;
}

.ron-bg-pink {
	background-color: #e03997;
	color: #ffffff;
}

.ron-bg-brown {
	background-color: #a5673f;
	color: #ffffff;
}

.ron-bg-grey {
	background-color: #8799a3;
	color: #ffffff;
}

.ron-bg-gray {
	background-color: #f0f0f0;
	color: #333333;
}

.ron-bg-black {
	background-color: #333333;
	color: #ffffff;
}

.ron-bg-white {
	background-color: #ffffff;
	color: #666666;
}

/* ==================
          文本
 ==================== */

.ron-text-size-12 {
	font-size: 12upx;
}

.ron-text-size-14{
	font-size: 14upx;
}
.ron-text-size-16{
	font-size: 16upx;
}
.ron-text-size-18{
	font-size: 18upx;
}
.ron-text-size-20{
	font-size: 20upx;
}
.ron-text-size-22{
	font-size: 22upx;
}
.ron-text-size-24{
	font-size: 24upx;
}
.ron-text-size-26{
	font-size: 26upx;
}
.ron-text-size-28{
	font-size: 28upx;
}
.ron-text-size-30{
	font-size: 30upx;
}
.ron-text-size-32{
	font-size: 32upx;
}
.ron-text-size-34{
	font-size: 34upx;
}
.ron-text-size-36{
	font-size: 36upx;
}
.ron-text-size-38{
	font-size: 38upx;
}
.ron-text-size-40{
	font-size: 40upx;
}
.ron-text-size-42{
	font-size: 42upx;
}
.ron-text-size-44{
	font-size: 44upx;
}
.ron-text-size-46{
	font-size: 46upx;
}
.ron-text-size-48{
	font-size: 48upx;
}
.ron-text-size-50{
	font-size: 50upx;
}
.ron-text-size-60{
	font-size: 60upx;
}
.ron-text-size-80{
	font-size: 80upx;
}
.ron-text-size-100{
	font-size: 100upx;
}
.ron-text-size-120{
	font-size: 120upx;
}
.ron-text-Abc {
	text-transform: Capitalize;
}

.ron-text-ABC {
	text-transform: Uppercase;
}

.ron-text-abc {
	text-transform: Lowercase;
}

.ron-text-price::before {
	content: "¥";
	font-size: 80%;
	margin-right: 4upx;
}

.ron-text-cut {
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}

.ron-text-bold {
	font-weight: bold;
}

.ron-text-center {
	text-align: center;
}

.ron-text-content {
	line-height: 1.6;
}

.ron-text-left {
	text-align: left;
}

.ron-text-right {
	text-align: right;
}

.ron-text-red {
	color: #e54d42;
}

.ron-text-orange{
	color: #f37b1d;
}

.ron-text-yellow{
	color: #fbbd08;
}

.ron-text-olive{
	color: #8dc63f;
}

.ron-text-green{
	color: #39b54a;
}

.ron-text-cyan{
	color: #1cbbb4;
}

.ron-text-blue{
	color: #0081ff;
}

.ron-text-purple {
	color: #6739b6;
}

.ron-text-mauve {
	color: #9c26b0;
}

.ron-text-pink{
	color: #e03997;
}

.ron-text-brown {
	color: #a5673f;
}

.ron-text-grey{
	color: #8799a3;
}

.ron-text-gray{
	color: #aaaaaa;
}

.ron-text-black{
	color: #333333;
}

.ron-text-white {
	color: #ffffff;
}


/*  -- 内外边距 -- */

.ron-margin-0 {
	margin: 0;
}

.ron-margin-10 {
	margin: 10upx;
}

.ron-margin-20 {
	margin: 20upx;
}

.ron-margin-20 {
	margin: 30upx;
}

.ron-margin-40 {
	margin: 40upx;
}

.ron-margin-50 {
	margin: 50upx;
}

.ron-margin-top-10 {
	margin-top: 10upx;
}

.ron-margin-top-20 {
	margin-top: 20upx;
}

.ron-margin-top-30 {
	margin-top: 30upx;
}

.ron-margin-top-40 {
	margin-top: 40upx;
}

.ron-margin-top-50 {
	margin-top: 50upx;
}

.ron-margin-right-10 {
	margin-right: 10upx;
}

.ron-margin-right-20 {
	margin-right: 20upx;
}

.ron-margin-right-30 {
	margin-right: 30upx;
}

.ron-margin-right-40 {
	margin-right: 40upx;
}

.ron-margin-right-50 {
	margin-right: 50upx;
}

.ron-margin-bottom-10 {
	margin-bottom: 10upx;
}

.ron-margin-bottom-20 {
	margin-bottom: 20upx;
}

.ron-margin-bottom-30 {
	margin-bottom: 30upx;
}

.ron-margin-bottom-40 {
	margin-bottom: 40upx;
}

.ron-margin-bottom-50 {
	margin-bottom: 50upx;
}

.ron-margin-left-10 {
	margin-left: 10upx;
}

.ron-margin-left-20 {
	margin-left: 20upx;
}

.ron-margin-left-30 {
	margin-left: 30upx;
}

.ron-margin-left-40 {
	margin-left: 40upx;
}

.ron-margin-left-50 {
	margin-left: 50upx;
}

.ron-margin-lr-10 {
	margin-left: 10upx;
	margin-right: 10upx;
}

.ron-margin-lr-20 {
	margin-left: 20upx;
	margin-right: 20upx;
}

.ron-margin-lr-30 {
	margin-left: 30upx;
	margin-right: 30upx;
}

.ron-margin-lr-40 {
	margin-left: 40upx;
	margin-right: 40upx;
}

.ron-margin-lr-50 {
	margin-left: 50upx;
	margin-right: 50upx;
}

.ron-margin-tb-10 {
	margin-top: 10upx;
	margin-bottom: 10upx;
}

.ron-margin-tb-20 {
	margin-top: 20upx;
	margin-bottom: 20upx;
}

.ron-margin-tb-30 {
	margin-top: 30upx;
	margin-bottom: 30upx;
}

.ron-margin-tb-40 {
	margin-top: 40upx;
	margin-bottom: 40upx;
}

.ron-margin-tb-50 {
	margin-top: 50upx;
	margin-bottom: 50upx;
}

.ron-padding-0 {
	padding: 0;
}

.ron-padding-10 {
	padding: 10upx;
}

.ron-padding-20 {
	padding: 20upx;
}

.ron-padding-30 {
	padding: 30upx;
}

.ron-padding-40 {
	padding: 40upx;
}

.ron-padding-50 {
	padding: 50upx;
}

.ron-padding-top-10 {
	padding-top: 10upx;
}

.ron-padding-top-20 {
	padding-top: 20upx;
}

.ron-padding-top-30 {
	padding-top: 30upx;
}

.ron-padding-top-40 {
	padding-top: 40upx;
}

.ron-padding-top-50 {
	padding-top: 50upx;
}

.ron-padding-right-10 {
	padding-right: 10upx;
}

.ron-padding-right-20 {
	padding-right: 20upx;
}

.ron-padding-right {
	padding-right: 30upx;
}

.ron-padding-right-40 {
	padding-right: 40upx;
}

.ron-padding-right-50 {
	padding-right: 50upx;
}

.ron-padding-bottom-10 {
	padding-bottom: 10upx;
}

.ron-padding-bottom-20 {
	padding-bottom: 20upx;
}

.ron-padding-bottom-30 {
	padding-bottom: 30upx;
}

.ron-padding-bottom-40 {
	padding-bottom: 40upx;
}

.ron-padding-bottom-50 {
	padding-bottom: 50upx;
}

.ron-padding-left-10 {
	padding-left: 10upx;
}

.ron-padding-left-20 {
	padding-left: 20upx;
}

.ron-padding-left-30 {
	padding-left: 30upx;
}

.ron-padding-left-40 {
	padding-left: 40upx;
}

.ron-padding-left-50 {
	padding-left: 50upx;
}

.ron-padding-lr-10 {
	padding-left: 10upx;
	padding-right: 10upx;
}

.ron-padding-lr-20 {
	padding-left: 20upx;
	padding-right: 20upx;
}

.ron-padding-lr-30 {
	padding-left: 30upx;
	padding-right: 30upx;
}

.ron-padding-lr-40 {
	padding-left: 40upx;
	padding-right: 40upx;
}

.ron-padding-lr-50 {
	padding-left: 50upx;
	padding-right: 50upx;
}

.ron-padding-tb-10 {
	padding-top: 10upx;
	padding-bottom: 10upx;
}

.ron-padding-tb-20 {
	padding-top: 20upx;
	padding-bottom: 20upx;
}

.ron-padding-tb-30 {
	padding-top: 30upx;
	padding-bottom: 30upx;
}

.ron-padding-tb-40 {
	padding-top: 40upx;
	padding-bottom: 40upx;
}

.ron-padding-tb-50 {
	padding-top: 50upx;
	padding-bottom: 50upx;
}

/* 圆角 */
.ron-radio-5{
	border-radius: 5px;
}
.ron-radio-10{
	border-radius: 10px;
}
.ron-radio-15{
	border-radius: 15px;
}
.ron-radio-20{
	border-radius: 20px;
}
.ron-radio-25{
	border-radius: 25px;
}
.ron-radio-30{
	border-radius: 30px;
}
.ron-radio-round{
	border-radius: 50%;
}
.ron-radio-tl-5{
	border-top-left-radius:5px;
}
.ron-radio-tl-10{
	border-top-left-radius:10px;
}
.ron-radio-tl-15{
	border-top-left-radius:15px;
}
.ron-radio-tl-20{
	border-top-left-radius:20px;
}

.ron-radio-tr-5{
	border-top-right-radius:5px;
}
.ron-radio-tr-10{
	border-top-right-radius:10px;
}
.ron-radio-tr-15{
	border-top-right-radius:15px;
}
.ron-radio-tr-20{
	border-top-right-radius:20px;
}

.ron-radio-bl-5{
	border-bottom-left-radius:5px;
}
.ron-radio-bl-10{
	border-bottom-left-radius:10px;
}
.ron-radio-bl-15{
	border-bottom-left-radius:15px;
}
.ron-radio-bl-20{
	border-bottom-left-radius:20px;
}

.ron-radio-br-5{
	border-bottom-right-radius:5px;
}
.ron-radio-br-10{
	border-bottom-right-radius:10px;
}
.ron-radio-br-15{
	border-bottom-right-radius:15px;
}
.ron-radio-br-20{
	border-bottom-right-radius:20px;
}

/* 边框 */
.ron-border-1-s-black{
	border: 1px solid black;
}
.ron-border-2-s-black{
	border: 2px solid black;
}
.ron-border-3-s-black{
	border: 3px solid black;
}
.ron-border-4-s-black{
	border: 4px solid black;
}
.ron-border-5-s-black{
	border: 5px solid black;
}
.ron-border-1-s-white{
	border: 1px solid white;
}
.ron-border-2-s-white{
	border: 2px solid white;
}
.ron-border-3-s-white{
	border: 3px solid white;
}
.ron-border-4-s-white{
	border: 4px solid white;
}
.ron-border-5-s-white{
	border: 5px solid white;
}

/* 浮动 */
.ron-float-none{
	float: none;
}
.ron-float-left{
	float: left;
}
.ron-float-right{
	float: right;
}

/* 布局 */

/*  -- flex弹性布局 -- */

.flex {
	display: flex;
}

.basis-xs {
	flex-basis: 20%;
}

.basis-sm {
	flex-basis: 40%;
}

.basis-df {
	flex-basis: 50%;
}

.basis-lg {
	flex-basis: 60%;
}

.basis-xl {
	flex-basis: 80%;
}

.flex-sub {
	flex: 1;
}

.flex-twice {
	flex: 2;
}

.flex-treble {
	flex: 3;
}

.flex-direction {
	flex-direction: column;
}

.flex-wrap {
	flex-wrap: wrap;
}

.align-start {
	align-items: flex-start;
}

.align-end {
	align-items: flex-end;
}

.align-center {
	align-items: center;
}

.align-stretch {
	align-items: stretch;
}

.self-start {
	align-self: flex-start;
}

.self-center {
	align-self: flex-center;
}

.self-end {
	align-self: flex-end;
}

.self-stretch {
	align-self: stretch;
}

.align-stretch {
	align-items: stretch;
}

.justify-start {
	justify-content: flex-start;
}

.justify-end {
	justify-content: flex-end;
}

.justify-center {
	justify-content: center;
}

.justify-between {
	justify-content: space-between;
}

.justify-around {
	justify-content: space-around;
}
/* grid布局 */

.ron-grid {
	display: flex;
	flex-wrap: wrap;
}
.ron-col-1{
	width: 100%;
}
.ron-col-2{
	width: 50%;
}

.ron-col-3{
	width: 33.33%;
}
.ron-col-4{
	width: 25%;
}
.ron-col-5{
	width: 20%;
}
